<template>
	<view class="news-list-container">
		<view class="tabT">
			<view class="items" :class="type==0?'active':''" @tap="changeTab(0)">
				公告
			</view>
			<view class="items" :class="type==1?'active':''" @tap="changeTab(1)">
				反馈
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height: calc(100% - 100rpx);">
			<view class="news-item" v-for="(news, index) in list" :key="index" @click="goToDetail(news)">
				<!--   <view class="news-image">
	  	     <image :src="news.image" mode="aspectFill"></image>
	  	   </view> -->
				<view class="news-content">
					<view class="news-title">{{ news.name }}</view>
					<view class="news-summary">{{ news.create_time }}</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				type: 0,
				page: 1,
				hasMore: true,
				list: [

				]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				try {
					const res = await request({
						url: 'index/notice-list',
						method: 'get',
						data: {
							page: this.page,
						}
					})
					console.log(res)
					if (res.status == 200) {
						console.log(res.data)
						if (res.data.list.length >= 20) {
							this.page++
						} else {
							this.hasMore = false
						}
						this.list = [...this.list, ...res.data.list]
					}
				} catch (error) {
					//TODO handle the exception
				}
			},
			changeTab(index) {
				if (index != this.type) {
					this.page = 1;
					this.list = []
					this.hasMore = true
					this.type = index;
					if (index == 0) {
						this.getList()
					} else {
						this.getFkList()
					}
				}
			},
			loadMore() {
				if (this.hasMore) {
					this.page = 1;
					this.list = []
					this.hasMore = true
					if (index == 0) {
						this.getList()
					} else {
						this.getFkList()
					}

				}

			},
			async getFkList() {
				try {
					const res = await request({
						url: 'index/feedback-list',
						method: 'get',
						data: {
							page: this.page,
						}
					})
					console.log(res)
					if (res.status == 200) {
						console.log(res.data)
						if (res.data.list.length >= 20) {
							this.page++
						} else {
							this.hasMore = false
						}
						this.list = [...this.list, ...res.data.list]
					}
				} catch (error) {
					//TODO handle the exception
				}
			},
			goToDetail(news) {
				uni.navigateTo({
					url: `/pages/news/detail?id=${news.id}&type=${this.type}`
				});
			}
		}
	};
</script>

<style lang="scss">
	.tabT {
		height: 80rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;

		.items {
			line-height: 80rpx;
			width: 50%;
			font-size: 32rpx;
			text-align: center;
			border-bottom: 2px solid transparent;

			&.active {
				border-bottom: 2px solid #4a90e2;
			}
		}
	}

	page {
		background-color: #f2f2f2;
	}

	.news-list-container {
		padding: 20rpx;
		box-sizing: border-box;
		height: 100vh;
	}

	.news-list-header {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.news-item {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.news-image {
		width: 120rpx;
		height: 120rpx;
	}

	.news-image image {
		width: 100%;
		height: 100%;
	}

	.news-content {
		padding: 20rpx;
	}

	.news-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.news-summary {
		font-size: 28rpx;
		color: #666;
	}
</style>